<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>修改密码 - 智能选课系统</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
		:root {
			--primary-gradient: linear-gradient(135deg, #667eea, #764ba2);
			--primary-gradient-alt: linear-gradient(135deg, #ff6b6b, #ffa500);
			--secondary-gradient: linear-gradient(135deg, #1d976c, #93f9b9);
			--accent-gradient: linear-gradient(135deg, #50c9c3, #96deda);
			--dark-bg: #0f1116;
			--card-bg: rgba(30, 33, 42, 0.7);
			--border-color: rgba(255, 255, 255, 0.1);
			--text-primary: #ffffff;
			--text-secondary: #b0b0b0;
			--success: #28a745;
			--danger: #dc3545;
			--warning: #ffc107;
			--info: #17a2b8;
			--transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: var(--dark-bg);
			color: var(--text-primary);
			min-height: 100vh;
			position: relative;
			overflow-x: hidden;
		}

		/* 背景动画 */
		.background-animation {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -2;
			background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
			background-size: 400% 400%;
			animation: gradientBG 15s ease infinite;
		}

		@keyframes gradientBG {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}

		/* 粒子效果 */
		.particles {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			overflow: hidden;
		}

		.particle {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.1);
			animation: float 15s infinite linear;
		}

		@keyframes float {
			0% {
				transform: translateY(0) translateX(0) rotate(0deg);
				opacity: 0;
			}
			10% {
				opacity: 1;
			}
			90% {
				opacity: 1;
			}
			100% {
				transform: translateY(-1000px) translateX(1000px) rotate(720deg);
				opacity: 0;
			}
		}

		/* 容器 */
		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
			position: relative;
			z-index: 1;
		}

		/* 卡片样式 */
		.modern-card {
			background: var(--card-bg);
			border-radius: 20px;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
			padding: 30px;
			position: relative;
			overflow: hidden;
			backdrop-filter: blur(12px);
			border: 1px solid var(--border-color);
			transition: var(--transition);
			margin-bottom: 25px;
		}

		.modern-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
		}

		.modern-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: var(--primary-gradient);
			border-radius: 20px 20px 0 0;
		}

		/* 标题样式 */
		.modern-header {
			text-align: center;
			margin-bottom: 30px;
			padding: 20px 0;
		}

		.modern-header h1 {
			font-size: 2.8rem;
			font-weight: 800;
			margin-bottom: 15px;
			background: var(--primary-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
		}

		.modern-header p {
			color: var(--text-secondary);
			font-size: 1.2rem;
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.6;
		}

		/* 表单样式 */
		.form-group {
			margin-bottom: 25px;
			position: relative;
		}

		.form-group label {
			display: block;
			margin-bottom: 10px;
			color: var(--text-primary);
			font-weight: 500;
			font-size: 1.1rem;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.form-control {
			width: 100%;
			padding: 16px 20px;
			border: 2px solid var(--border-color);
			border-radius: 12px;
			font-size: 16px;
			color: var(--text-primary);
			background-color: rgba(0, 0, 0, 0.2);
			transition: var(--transition);
		}

		.form-control:focus {
			border-color: #667eea;
			outline: none;
			box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
			background-color: rgba(0, 0, 0, 0.3);
		}

		.form-control::placeholder {
			color: #6c757d;
		}

		select.form-control {
			appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 20px center;
			background-size: 20px;
			padding-right: 50px;
		}

		/* 按钮样式 */
		.btn {
			padding: 16px 28px;
			border: none;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: var(--transition);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
			text-decoration: none;
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary-gradient);
			z-index: -1;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.btn:hover::before {
			opacity: 1;
		}

		.btn-primary {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.3);
		}

		.btn-primary:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(102, 126, 234, 0.4);
		}

		.btn-secondary {
			background: rgba(255, 255, 255, 0.1);
			color: var(--text-primary);
			border: 2px solid var(--border-color);
		}

		.btn-secondary:hover {
			background: rgba(255, 255, 255, 0.2);
			transform: translateY(-3px);
			box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
		}

		.btn-success {
			background: linear-gradient(135deg, #1d976c, #93f9b9);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(29, 151, 108, 0.3);
		}

		.btn-success:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(29, 151, 108, 0.4);
		}

		.btn-danger {
			background: linear-gradient(135deg, #ff6b6b, #ffa500);
			color: white;
			box-shadow: 0 10px 25px -5px rgba(255, 107, 107, 0.3);
		}

		.btn-danger:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px -5px rgba(255, 107, 107, 0.4);
		}

		.btn-block {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		/* 菜单样式 */
		.menu-item {
			margin-bottom: 15px;
			border-radius: 12px;
			overflow: hidden;
			transition: var(--transition);
			background: var(--card-bg);
			backdrop-filter: blur(10px);
			border: 1px solid var(--border-color);
		}

		.menu-item:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
		}

		.menu-header {
			background: var(--primary-gradient);
			color: white;
			padding: 18px 20px;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 600;
			font-size: 1.2rem;
			transition: var(--transition);
		}

		.menu-header i {
			transition: transform 0.3s ease;
		}

		.menu-header.active i {
			transform: rotate(180deg);
		}

		.submenu {
			background: rgba(0, 0, 0, 0.1);
			padding: 0;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.4s ease, padding 0.4s ease;
		}

		.submenu.active {
			max-height: 500px;
			padding: 10px 0;
		}

		.submenu-item {
			padding: 15px 20px 15px 40px;
			display: block;
			color: var(--text-primary);
			text-decoration: none;
			transition: var(--transition);
			border-left: 3px solid transparent;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.submenu-item:hover {
			background: rgba(102, 126, 234, 0.2);
			color: #ffffff;
			border-left: 3px solid #667eea;
			text-decoration: none;
			padding-left: 45px;
		}

		.single-item {
			background: linear-gradient(135deg, #2d3748, #4a5568);
			color: white;
			padding: 18px 20px;
			display: block;
			text-decoration: none;
			border-radius: 12px;
			transition: var(--transition);
			margin-bottom: 15px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.single-item:hover {
			background: var(--primary-gradient);
			color: white;
			text-decoration: none;
			transform: translateY(-3px);
			box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
		}

		.logout-item {
			background: var(--primary-gradient-alt);
		}

		/* 表格样式 */
		.table-container {
			overflow-x: auto;
			border-radius: 15px;
			margin-bottom: 25px;
			box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
		}

		table {
			width: 100%;
			border-collapse: collapse;
			background: rgba(30, 33, 42, 0.5);
			border-radius: 15px;
			overflow: hidden;
		}

		th, td {
			padding: 18px 20px;
			text-align: left;
			border-bottom: 1px solid var(--border-color);
		}

		th {
			background: rgba(102, 126, 234, 0.2);
			font-weight: 600;
			color: var(--text-primary);
		}

		tr:last-child td {
			border-bottom: none;
		}

		tr:hover td {
			background: rgba(102, 126, 234, 0.1);
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			.container {
				padding: 15px;
			}
			
			.modern-header h1 {
				font-size: 2.2rem;
			}
			
			.modern-card {
				padding: 20px 15px;
			}
			
			.btn {
				padding: 14px 20px;
				width: 100%;
				margin-bottom: 10px;
			}
			
			th, td {
				padding: 12px 15px;
				font-size: 0.9rem;
			}
		}

		/* 加载动画 */
		.btn-loading {
			position: relative;
			color: transparent !important;
		}

		.btn-loading::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -10px 0 0 -10px;
			border: 2px solid transparent;
			border-top: 2px solid #fff;
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		/* 返回链接 */
		.back-link {
			display: inline-block;
			margin-bottom: 20px;
			color: #667eea;
			text-decoration: none;
			font-weight: 500;
			transition: var(--transition);
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.back-link:hover {
			color: #764ba2;
			text-decoration: underline;
		}

		/* 系统信息 */
		.system-info {
			text-align: center;
			margin-top: 30px;
			color: var(--text-secondary);
			font-size: 14px;
			font-weight: 400;
		}

		/* 动画效果 */
		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.fade-in-up {
			animation: fadeInUp 0.6s ease forwards;
		}

		/* 徽章样式 */
		.badge {
			display: inline-block;
			padding: 5px 12px;
			border-radius: 20px;
			font-size: 0.8rem;
			font-weight: 600;
			text-transform: uppercase;
		}

		.badge-primary {
			background: var(--primary-gradient);
			color: white;
		}

		.badge-success {
			background: var(--secondary-gradient);
			color: white;
		}

		.badge-warning {
			background: var(--accent-gradient);
			color: #000;
		}

		/* 用户信息栏 */
		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 20px;
			margin-bottom: 25px;
			background: var(--card-bg);
			border-radius: 15px;
			backdrop-filter: blur(10px);
			border: 1px solid var(--border-color);
		}

		.user-info h3 {
			margin: 0;
			font-weight: 600;
			color: var(--text-primary);
		}

		.user-info .welcome-text {
			color: var(--text-secondary);
			font-size: 1rem;
		}

		/* 消息提示 */
		.alert {
			padding: 15px 20px;
			border-radius: 12px;
			margin-bottom: 20px;
			border: 1px solid transparent;
		}

		.alert-success {
			background: rgba(40, 167, 69, 0.2);
			border-color: rgba(40, 167, 69, 0.3);
			color: #a2fca2;
		}

		.alert-danger {
			background: rgba(220, 53, 69, 0.2);
			border-color: rgba(220, 53, 69, 0.3);
			color: #f8b6b6;
		}

		.alert-warning {
			background: rgba(255, 193, 7, 0.2);
			border-color: rgba(255, 193, 7, 0.3);
			color: #ffeaa7;
		}

		.alert-info {
			background: rgba(23, 162, 184, 0.2);
			border-color: rgba(23, 162, 184, 0.3);
			color: #a8e6ff;
		}
		
		/* 密码强度条 */
		.password-strength-bar {
			height: 100%;
			width: 0%;
			background: #e74c3c;
			transition: all 0.3s ease;
			border-radius: 2px;
		}
		
		.password-strength-text {
			font-size: 12px;
			color: var(--text-secondary);
			margin-top: 5px;
			text-align: right;
			display: block;
		}
		
		/* 错误提示 */
		.error {
			color: #e74c3c;
			font-size: 14px;
			margin-top: 5px;
			display: block;
		}
		
		.btn-container {
			display: flex; 
			gap: 15px; 
			margin-top: 30px;
		}
	</style>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<script type="text/javascript">
		$().ready(function() {
			$("#myform").validate({
				rules: {
					password: "required",
					password_2: {
						equalTo: "#password"
					}
				},
				messages: {
					password: {
						required: "请输入密码",
					},
					password_2: {
						required: "请输入密码",
						equalTo: "两次密码输入不一致",
					}
				},
				errorElement: "span",
				errorClass: "error",
				highlight: function(element) {
					$(element).closest('.form-group').find('.form-control').css('border-color', '#e74c3c');
				},
				unhighlight: function(element) {
					$(element).closest('.form-group').find('.form-control').css('border-color', 'rgba(255, 255, 255, 0.1)');
				}
			});

			// 密码强度检测
			$('#password').on('input', function() {
				var password = $(this).val();
				var strength = 0;
				var strengthText = '';
				var strengthClass = '';

				if (password.length > 0) {
					if (password.length >= 8) strength += 25;
					if (password.match(/[a-z]+/)) strength += 25;
					if (password.match(/[A-Z]+/)) strength += 25;
					if (password.match(/[0-9]+/)) strength += 25;

					if (strength < 50) {
						strengthText = '弱';
						strengthClass = 'weak';
					} else if (strength < 75) {
						strengthText = '中';
						strengthClass = 'medium';
					} else {
						strengthText = '强';
						strengthClass = 'strong';
					}
				}

				$('.password-strength-bar').css('width', strength + '%');
				$('.password-strength-text').text(strengthText);

				// 更新颜色
				if (strengthClass === 'weak') {
					$('.password-strength-bar').css('background', '#e74c3c');
				} else if (strengthClass === 'medium') {
					$('.password-strength-bar').css('background', '#f39c12');
				} else if (strengthClass === 'strong') {
					$('.password-strength-bar').css('background', '#27ae60');
				}
			});
		});
	</script>
</head>
<body>
	<!-- 背景动画 -->
	<div class="background-animation"></div>
	
	<!-- 背景粒子效果 -->
	<div class="particles"></div>

	<div class="container">
		<div class="modern-header">
			<h1>智能选课系统</h1>
			<p>修改密码</p>
		</div>

		<div class="user-info">
			<span class="welcome-text">欢迎回来，</span>
			<h3>${UNAME}</h3>
		</div>

		<div class="modern-card" style="max-width: 600px; margin: 0 auto;">
			<div style="background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; margin-bottom: 25px;">
				<div style="display: flex; margin-bottom: 12px; align-items: center;">
					<span style="font-weight: 600; color: var(--text-primary); min-width: 80px; margin-right: 15px;">
						<i class="fas fa-user-tag"></i> 身份：
					</span>
					<span style="color: var(--text-secondary); font-weight: 500; flex: 1;">
						<c:out value="${SORT}"></c:out>
					</span>
				</div>
				<div style="display: flex; align-items: center;">
					<span style="font-weight: 600; color: var(--text-primary); min-width: 80px; margin-right: 15px;">
						<i class="fas fa-user"></i> 用户名：
					</span>
					<span style="color: var(--text-secondary); font-weight: 500; flex: 1;">
						<c:out value="${UNAME}"></c:out>
					</span>
				</div>
			</div>

			<form action="${pageContext.request.contextPath}/Update_Pwd_Servlet" method="post" id="myform">
				<div class="form-group">
					<label for="password"><i class="fas fa-lock"></i> 新密码：</label>
					<input id="password" name="password" type="password" class="form-control" placeholder="请输入新密码">
					<div style="height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-top: 8px; overflow: hidden; position: relative;">
						<div class="password-strength-bar"></div>
					</div>
					<span class="password-strength-text"></span>
				</div>

				<div class="form-group">
					<label for="password_2"><i class="fas fa-lock"></i> 确认新密码：</label>
					<input type="password" name="password_2" id="password_2" class="form-control" placeholder="请再次输入新密码">
				</div>

				<div style="background: rgba(52, 152, 219, 0.2); border-radius: 12px; padding: 15px; margin-top: 20px; border-left: 4px solid #3498db;">
					<h4 style="color: var(--text-primary); margin-bottom: 10px; font-size: 14px; display: flex; align-items: center; gap: 8px;">
						<i class="fas fa-shield-alt"></i> 密码安全提示
					</h4>
					<ul style="list-style: none; padding: 0; margin: 0;">
						<li style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;">
							<i class="fas fa-circle" style="font-size: 6px;"></i> 建议使用至少8个字符的密码
						</li>
						<li style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;">
							<i class="fas fa-circle" style="font-size: 6px;"></i> 包含字母、数字和特殊字符更安全
						</li>
						<li style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;">
							<i class="fas fa-circle" style="font-size: 6px;"></i> 避免使用生日、姓名等易猜到的信息
						</li>
					</ul>
				</div>

				<div class="btn-container">
					<input type="submit" value="确认修改" class="btn btn-primary">
					<input name="reset" type="reset" value="重置" class="btn btn-secondary">
				</div>
			</form>
		</div>
	</div>

	<script>
		// 创建背景粒子效果
		document.addEventListener('DOMContentLoaded', function() {
			const particlesContainer = document.querySelector('.particles');
			const particleCount = 30;
			
			for (let i = 0; i < particleCount; i++) {
				const particle = document.createElement('div');
				particle.classList.add('particle');
				
				// 随机设置粒子大小
				const size = Math.random() * 20 + 5;
				particle.style.width = `${size}px`;
				particle.style.height = `${size}px`;
				
				// 随机设置粒子位置
				particle.style.left = `${Math.random() * 100}%`;
				particle.style.top = `${Math.random() * 100}%`;
				
				// 随机设置动画延迟和持续时间
				const delay = Math.random() * 15;
				const duration = 15 + Math.random() * 10;
				particle.style.animationDelay = `${delay}s`;
				particle.style.animationDuration = `${duration}s`;
				
				particlesContainer.appendChild(particle);
			}
			
			// 添加视差滚动效果
			document.addEventListener('mousemove', (e) => {
				const x = (window.innerWidth - e.pageX) / 50;
				const y = (window.innerHeight - e.pageY) / 50;
				particlesContainer.style.transform = `translateX(${x}px) translateY(${y}px)`;
			});
		});
	</script>
	<div class="back-btn">
		<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
	</div>
</body>
</html>